<template>
  <div class="donate-message gap-col-8" :class="{ self }">
    <div class="title gap-row-10">
      <div class="font-size-12 font-weight-500 line-height-120">
        {{ self ? $t('message.youPayDonate') : $t('message.youReceiveDonate') }}
      </div>
      <div class="font-size-16 font-weight-500 line-height-140">${{ toFixedString(amount, 2) }}</div>
    </div>
    <div class="divider bg-graydisabled"></div>
    <div class="content font-size-14 font-weight-400 line-height-140">{{ text }}</div>
  </div>
</template>

<script setup>
import { toFixedString } from '@/utils/string-helper'

defineProps({
  text: { type: String, required: true },
  self: { type: Boolean, default: false },
  amount: { type: Number, required: true },
})
</script>

<style lang="scss">
.donate-message {
  width: fit-content;
  padding: 0.5rem 1rem;
  background: rgb(var(--v-theme-primary-gray));
  border-radius: 0.625rem;
  display: flex;
  flex-direction: column;

  &.self {
    background: rgb(var(--v-theme-primary));
  }

  .title {
    display: flex;
    align-items: center;

    :first-child {
      flex-grow: 1;
    }
  }

  .divider {
    width: 100%;
    height: 1px;
  }
}
</style>
